<template>
  <div id="jiankang">
    <div id="main">
      <div id="header1"><div id="header"></div></div>
      <div class="title">
        <div id="span"><span>基本信息</span></div>
      </div>
      <div id="content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="name">
            <el-input
              class="shuru"
              v-model="ruleForm.name"
              placeholder="请输入真实姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="证件号码" prop="num">
            <el-input
              placeholder="请输入证件号码"
              class="shuru"
              type="text"
              v-model="ruleForm.num"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="num1">
            <el-input
              class="shuru"
              v-model="ruleForm.num1"
              placeholder="请输入联系方式"
            ></el-input>
          </el-form-item>
          <div id="ssq">
            <span>当前所在城市(必填)：</span>
            <el-cascader-panel
              :props="{ value: 'label' }"
              v-model="pcaData"
              :options="regionData"
            ></el-cascader-panel>
          </div>
        </el-form>
        <div class="title">
          <div id="span"><span>近期情况</span></div>
        </div>
        <div id="shifou">
          <span>近14天内是否接触过新冠肺炎患者或疑似患者</span>
          <el-radio v-model="radio" label="1">否</el-radio>
          <el-radio v-model="radio" label="2">是</el-radio>
          <el-radio v-model="radio" label="3">不确定</el-radio>
        </div>
        <div id="zhuangkuang">
          <div id="spam"><span>当前健康状况</span></div>

          <el-checkbox-group v-model="checkList">
            <el-checkbox label="无任何症状"></el-checkbox><br />
            <el-checkbox
              label="感冒样症状：乏力、咳嗽、发烧、肌肉痛、头痛"
            ></el-checkbox
            ><br />
            <el-checkbox label="喘憋、呼吸急促"></el-checkbox><br />
            <el-checkbox label="恶心呕吐、腹泻"></el-checkbox><br />
            <el-checkbox label="心慌、胸闷"></el-checkbox><br />
            <el-checkbox
              label="结膜炎（红眼病样表现：眼睛涩、红、分泌物）"
            ></el-checkbox
            ><br />
            <el-checkbox label="其他症状"></el-checkbox><br />
          </el-checkbox-group>
        </div>
      </div>
      <div id="subbtn">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >上传<i class="el-icon-upload el-icon--right"></i
        ></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { regionData } from "element-china-area-data";
export default {
  data() {
    return {
      pcaData: "",
      checkList: ["无任何症状"],
      radio: "1",
      regionData,
      ruleForm: {
        name: "",
        num: "",
        num1: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "请输入正确的姓名格式", trigger: "blur" },
        ],
        num: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "请输入正确的身份证号",
          },
        ],
        num1: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号码",
          },
        ],
      },
    };
  },
  computed: {},
  methods: {
    submitForm(formName) {
      if (this.pcaData.length == 0) {
        this.$notify({
          title: "提示",
          message: "请选择省市区",
          type: "warning",
        });
        return;
      }
      if (this.radio == 2 || this.radio == 3) {
        alert(
          "由于您不确定是否接触过新冠肺炎患者或疑似患者，所以无法申请健康码！请返回您的家居家隔离14天！谢谢配合！"
        );
        return;
      }
      if (this.checkList[0] != "无任何症状") {
        alert(
          "您的身体情况不达标，为了您和他人的健康着想，请返回您的家居家隔离14天后再来申请健康码！谢谢配合"
        );
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push("/shoukuan");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {},
  mounted() {},
};
</script>
<style  scoped>
#main {
  width: 80%;
  height: 1000px;
  margin: 0 auto;
  background-color: rgb(238, 238, 238);
}
#header {
  height: 70px;
  width: 80%;
  margin-left: 110px;

  border-radius: 15px;
  background: url("image/jiankang.png");
}
.shuru {
  width: 91% !important;
}
#header1 {
  height: 100px;
  padding-top: 30px;
}
.title {
  margin-left: 110px;
  margin-top: 40px;
  border-bottom: 2px solid rgb(173, 164, 164);
  width: 80%;
}
#span {
  width: 66px;
  border-bottom: 2px solid blue;
  margin-bottom: -2px;
}

#content {
  margin-top: 30px;
}
#ssq {
  margin-left: 50px;
  background-color: rgb(181, 204, 196);
  margin-right: 120px;
}
#shifou {
  margin-left: 50px;
  margin-top: 30px;
}
#zhuangkuang {
  margin-left: 50px;
  margin-top: 30px;
}
#spam {
  margin-bottom: 15px;
}
#subbtn {
  text-align: center;
  margin-top: 30px;
}
</style>